<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formData" class="demo-form-inline" ref="form">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button>新建课程</el-button>
      </div>
      <template>
        <el-table :data="userData" style="width: 100%">
          <el-table-column prop="id" label="用户ID" width="100">
          </el-table-column>
          <el-table-column prop="portrait" label="头像" width="50">
            <template slot-scope="scope">
              <el-avatar :src="scope.row.portrait||'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="用户名">
          </el-table-column>
          <el-table-column prop="phone" label="手机号">
          </el-table-column>
          <el-table-column prop="createTime" label="注册时间" :formatter="formatter">
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="ENABLE"
              @change="EnableUser(scope.row)">
            </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="formData.currentPage"
          :page-sizes="[10, 15, 20]" :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <el-dialog title="分配角色" :visible.sync="dialogFormVisible">
          <el-form :model="editForm">
            <el-form-item>
              <el-select v-model="editForm.selectedRoles"
              multiple placeholder="请选择" style="width:500px">
                <el-option
                  v-for="role in roles"
                  :key="role.id"
                  :label="role.name"
                  :value="role.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleAlloc">确 定</el-button>
          </div>
        </el-dialog>
      </template>
    </el-card>
  </div>
</template>

<script>
// eslint-disable-next-line
import { getUserPages } from '@/services/user';
// eslint-disable-next-line
import { GetAllRoles,GetUserRoles,UpdateUserRole } from '@/services/role';

export default {
  name: 'LessonConfig',
  created() {
    this.loadUsers();
    this.loadRoles();
  },
  data() {
    return {
      dialogFormVisible: false,
      formData: {
        currentPage: 1,
        pageSize: 10,
        phone: '',
        startCreateTime: '',
        endCreateTime: '',
      },
      editForm: {
        userID: 0,
        selectedRoles: [],
      },
      date: [],
      userData: [],
      roles: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          },
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          },
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          },
        }],
      },
      total: 0,

    };
  },
  methods: {
    async loadUsers() {
      const { data } = await getUserPages(this.formData);
      if (data.code === '000000') {
        this.userData = data.data.records;
        this.total = data.data.total;
      }
    },
    async loadRoles() {
      const { data } = await GetAllRoles();
      if (data.code === '000000') {
        this.roles = data.data;
      }
    },
    onSubmit() {
      if (this.date.length > 0) {
        [this.formData.startCreateTime, this.formData.endCreateTime] = this.date;
      } else {
        this.formData.startCreateTime = '';
        this.formData.endCreateTime = '';
      }
      this.loadUsers();
    },
    onReset() {
      this.$refs.form.resetFields();
    },
    formatter(row) {
      const date = new Date(row.createTime);
      return date.toLocaleString();
    },
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.formData.currentPage = 1;
      this.loadUsers();
    },
    handleCurrentChange(val) {
      this.formData.currentPage = val;
      this.loadUsers();
    },
    EnableUser(val) {
      console.log(val);
      console.log(this);
    },
    async handleEdit(rowData) {
      const { data } = await GetUserRoles(rowData.id);
      if (data.code === '000000') {
        this.editForm.selectedRoles = data.data.map((ele) => ele.id);
        this.editForm.userID = rowData.id;
        this.dialogFormVisible = true;
      }
    },
    async handleAlloc() {
      const { data } = await UpdateUserRole({
        userId: this.editForm.userID,
        roleIdList: this.editForm.selectedRoles,
      });
      if (data.code === '000000') {
        this.$message.success('角色分配成功');
      } else {
        this.$message.error('角色分配失败');
      }
      this.dialogFormVisible = false;
    },
  },
};
</script>
